.common_title {
  border-bottom: 4px solid #CECECE;
  padding: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .l {
    font-weight: 500;
    font-size: 34px;
    color: #000000;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 4px;
      background: #004097;
      bottom: -19px;
      left: 0;
    }
  }

  .more {
    font-weight: 300;
    font-size: 20px;
    color: #5E5E5E;
    margin: 0 22px 0 0;
  }
}

.index1 {
  position: relative;

  .position {
    position: absolute;
    bottom: 76px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .line {
      width: 43.5%;
      height: 1px;
      background: rgba(255, 255, 255, 0.35);
    }

    .display {
      display: flex;
      align-items: center;

      .list {
        width: 30px;
        height: 30px;
        position: relative;
        border-radius: 50%;
        border: 1px solid transparent;
        transition: .7s;
        cursor: pointer;

        &:not(:last-child) {
          margin: 0 5px 0 0;
        }

        &:after {
          content: '';
          position: absolute;
          width: 7px;
          height: 7px;
          background: #FFFFFF;
          border-radius: 50%;
          opacity: 0.35;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: .7s;
        }

        svg {
          width: 125%;
          height: 125%;
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          path {
            stroke-dashoffset: 157px;
            //stroke-dashoffset: 50px;
            fill: none;
            stroke: #fff;
            stroke-miterlimit: 10;
            stroke-width: 2px;
            transition: 0.6s;
          }
        }

        &.on {
          border: 1px solid rgba(255, 255, 255, .2);

          &:after {
            opacity: 1;
          }

          svg {
            path {
              stroke-dashoffset: 0;
            }
          }
        }
      }
    }
  }

  .swiper {
    width: 100%;
    height: 100%;

    .swiper-slide {
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .text{
        position: absolute;
        left: 0;
        top:50%;
        width: 100%;
        text-align: center;
        color:white;
        transform: translateY(-50%);
        .cn{
          font-size: 93px;
        }
        .en{
          font-size: 35px;
          font-weight: lighter;
          text-transform: uppercase;
          margin-top: 10px;
        }
      }
    }
  }
}

.index2 {
  padding: 79px 0 110px 0;

  .wrap {
    width: 1500px;
    margin: auto;
    max-width: 90%;

    .content {
      margin: 15px 0 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .l {
        width: 714px;
        position: relative;
        overflow: hidden;

        .button {
          width: 90%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 95%;
          pointer-events: none;

          svg {
            width: 24px;
            height: 24px;
            cursor: pointer;
            pointer-events: auto;

            path {
              fill: #fff;
            }

            &:first-child {
              transform: rotate(180deg);
            }
          }
        }

        .text {
          position: absolute;
          bottom: 25px;
          left: 34px;
          z-index: 1;
          font-weight: 400;
          font-size: 22px;
          color: #FFFFFF;
        }

        img {
          width: 100%;
          transition: .6s;

          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .r {
        width: 707px;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 4px;
          background: #004097;
          top: -36px;
          left: 0;
        }

        .list {
          display: flex;
          align-items: center;

          &:not(:last-child) {
            margin: 0 0 40px;
          }

          .circle {
            width: 6px;
            height: 6px;
            background: #636363;
            border-radius: 50%;
            margin: 0 26px 0 28px;
          }

          p {
            font-weight: 300;
            font-size: 21px;
            color: #636363;
            width: 417px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 61px 0 0;
            transition: .6s;
          }

          .time {
            font-weight: 400;
            font-size: 21px;
            color: #636363;
            transition: .6s;
          }

          &:hover {
            .circle {
              background: #004097;
            }

            p, .time {
              color: #004097;
            }
          }
        }
      }
    }

    .flex {
      margin: 68px 0 0 0;
      display: flex;
      height: 123px;

      .item {
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F9F9F9;
        cursor: pointer;
        transition: .6s;

        & > div {
          display: flex;
          align-items: center;

          span {
            font-weight: 500;
            font-size: 34px;
            color: #4E4E4E;
            transition: .6s;
          }

          .line {
            width: 1px;
            height: 21px;
            background: #474747;
            margin: 0 18px 0 23px;
            transition: .6s;
          }

          .eng {
            font-weight: 400;
            font-size: 14px;
            color: #4E4E4E;
            line-height: 16px;
            transition: .6s;
          }
        }

        &.on{
          background: #004097;

          & > div {
            span, .eng {
              color: #fff;
            }

            .line {
              background: #fff;
            }
          }
        }
      }
    }
  }
}

.index3 {
  padding: 0 0 110px;

  .wrap {
    width: 1500px;
    margin: auto;
    max-width: 90%;

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 0 0 0;

      .l {
        width: 634px;

        .list {
          display: flex;
          align-items: center;
          border-bottom: 3px solid #EEEEEE;
          padding: 0 0 7px;

          &:not(:last-child) {
            margin: 0 0 7px;
          }

          .time {
            width: 78px;
            height: 55px;
            border: 2px solid #828282;
            border-bottom: none;
            margin: 0 24px 0 0;
            transition: .6s;

            span {
              height: 29px;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 17px;
              color: #828282;
              transition: .7s;
            }

            .color {
              height: 25px;
              background: #828282;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
              transition: .6s;
            }
          }

          .pick {
            font-weight: 300;
            font-size: 22px;
            color: #828282;
            transition: .6s;
            width: 460px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:hover {
            .time {
              span {
                color: #000;
              }

              .color {
                background: #014097;
                color: #fff;
              }
            }

            .pick {
              color: #004097;
            }
          }
        }
      }

      .r {
        width: 711px;
        height: 372px;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .button {
          width: 670px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 95%;
          pointer-events: none;

          svg {
            width: 24px;
            height: 24px;
            cursor: pointer;
            pointer-events: auto;

            path {
              fill: #fff;
            }

            &:first-child {
              transform: rotate(180deg);
            }
          }
        }

        .bg {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: -1;
        }

        .swiper {
          width: 574px;
          margin: auto;

          .swiper-slide {
            left: -20px;

            img {
              width: 207px;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
}

.index4 {
  position: relative;
  z-index: 1;
  overflow: hidden;


  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .wrap {
    width: 1500px;
    margin: 78px auto 66px;
    max-width: 90%;
    position: relative;
    .position1{
      position: absolute;
      top: 370px;
      left: 50px;
      width: 150px;
      transform: translateX(-50px);
    }
    .position2{
      position: absolute;
      top: 508px;
      left: 315px;
      width: 98px;
      transform: translateX(-50px);
    }
    .position3{
      position: absolute;
      top: 105px;
      left: 341px;
      width: 70px;
      transform: translateX(-50px);
    }

    .title {
      font-weight: 500;
      font-size: 35px;
      color: #000000;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        bottom: -17px;
        left: 0;
        width: 85px;
        height: 4px;
        background: #004097;
      }
    }

    .img {
      width: 1476px;
      max-width: 100%;
      margin: 55px 0 0 0;

      img {
        width: 100%;
      }
    }
  }
}

.index5 {
  position: relative;
  padding: 146px 0 52px 0;
  background:   url(../images/team_bg.png) no-repeat;
  background-size: cover;

  .wrap {
    width: 1500px;
    margin: auto;
    max-width: 90%;

    .title {
      text-align: center;
      margin: 0 0 80px;

      h1 {
        font-weight: 500;
        font-size: 35px;
        color: #000000;
        width: fit-content;
        margin: 0 auto 53px;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          width: 102px;
          height: 4px;
          background: #004097;
          bottom: -18px;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      p {
        font-weight: 300;
        font-size: 25px;
        color: #474747;
        line-height: 44px;
      }
    }

    .content {
      position: relative;

      .button {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;

        img {
          cursor: pointer;
          pointer-events: auto;
          width: 43px;
          object-fit: contain;
        }
      }

      .swiper {
        width: 1300px;
        margin: auto;

        .swiper-slide {
          background: #fff;

          .img {
            margin: 22px auto 14px;
            width: 90%;

            img {
              width: 100%;
            }
          }

          .text {
            width: 90%;
            margin: 0 auto 38px;
            font-weight: 500;
            font-size: 26px;
            color: #000000;
          }
        }
      }
    }
  }
}

.bor_content{
  width: 1380px;
  margin: 57px 0 320px 140px;
  transform: scale(1.4);
  transform-origin: top left;
}

.bor_content .item{
  pointer-events: none;
}
.bor_content .item.opacity{
  opacity: 0;
  pointer-events: none;
}
.bor_content .item.opacity .box{
  pointer-events: none;
}
.bor_content .item .text .headline{
  font-size: 12px;
  border-bottom: 2px solid #fff;
  padding: 0 0 1px;
  width: fit-content;
  margin: auto;
}
.bor_content .item .text h1{
  font-size: 8px;
}
.bor_content .item .text h1 {
  font-size: 15px;
  margin: 6px 0 0 0;
}
.bor_content .item .text .eng {
  margin: 8px 0 0 0;
  font-size: 7px;
  text-transform: uppercase;
}

.bor_content .item .box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 91px;
  height: 158px;
  border: 2px solid rgba(0, 64, 151,.8);
  background: rgba(0, 64, 151,.8);
  border-right: 0;
  border-left: 0;
  position: relative;
  pointer-events: auto;
  transition: .6s;
}

.bor_content .item .box .picture{
  position: absolute;
  width: 186px;
  height: 104%;
  top: 50%;
  left: 50%;
  z-index: 9;
  transform: translate(-50%, -50%);
  //clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  //clip-path: polygon(27% 3%, 73% 3%, 97% 50%, 73% 97%, 27% 97%, 3% 50%);
  clip-path: polygon(26% 2%, 74% 2%, 98% 50%, 74% 98%, 26% 98%, 2% 50%);
}
.bor_content .item .box .picture:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 64, 151,.8);
  opacity: 0;
  transition: .4s;
}
//.bor_content .item:hover .box .picture {
//  clip-path: polygon(27% 3%, 73% 3%, 97% 50%, 73% 97%, 27% 97%, 3% 50%);
//}
.bor_content .item:hover .picture:after{
  opacity: 1;
}
.bor_content .item .box .picture .text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  z-index: 2;
  font-weight: 400;
  font-size: 15px;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
  transition: .4s;
}
.bor_content .item:hover .picture .text {
  opacity: 1;
}
.bor_content .item .box .picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bor_content .item .box:before {
  content: "";
  width: 91px;
  height: 91px;
  border-bottom: 2px solid rgba(0, 64, 151,.8);
  background: rgba(0, 64, 151,.8);
  position: absolute;
  transform: rotate(-60deg);
  bottom: 16px;
  right: -29px;
}
.bor_content .item .box:after {
  content: "";
  width: 91px;
  height: 91px;
  border-top: 2px solid rgba(0, 64, 151,.8);
  background: rgba(0, 64, 151,.8);
  position: absolute;
  transform: rotate(60deg);
  top: 16px;
  right: -29px;
}
.bor_content .item .box .line {
  width: 91px;
  height: 91px;
  border-bottom: 2px solid rgba(0, 64, 151,.8);
  background: rgba(0, 64, 151,.8);
  position: absolute;
  transform: rotate(60deg);
  bottom: 16px;
  left: -29px;
}
.bor_content .item .box .line1 {
  width: 91px;
  height: 91px;
  border-top: 2px solid rgba(0, 64, 151,.8);
  background: rgba(0, 64, 151,.8);
  position: absolute;
  transform: rotate(-60deg);
  top: 16px;
  left: -29px;
}
.bor_content .item{
  border: 31px solid transparent;
  border-top: 0;
  border-bottom: 0;
  cursor: pointer;
}
.bor_content .item {
  border-bottom: 13px solid transparent;
}


.bor_content .item:hover .box {
  //background: rgba(57, 182, 231, 1);
}

.bor_content .item:hover .box .line1,
.bor_content .item:hover .box .line,
.bor_content .item:hover .box:after,
.bor_content .item:hover .box:before {
  //background: rgba(57, 182, 231, 1);
}
.bor_content .item:nth-child(2n-1) {
  transform: translateY(86px);
}
.bor_content .flex{
  display: flex;
}
@media screen and (max-width: 1666px) {
  .bor_content {
    transform: scale(1.3);
  }
  .index4 .wrap .position3 {
    top: 105px;
  }
  .index4 .wrap .position2 {
    top: 495px;
    left: 309px;
  }
}

@media screen and (max-width: 1650px) {
  .index5 .wrap .content .swiper {
    width: 85%;
  }
}
@media screen and (max-width: 1565px) {
  .bor_content {
    transform: scale(1.2);
  }
  .index4 .wrap .position2 {
    top: 453px;
    left: 288px;
  }
  .index4 .wrap .position1 {
    top: 345px;
    left: 58px;
  }
  .index4 .wrap .position3 {
    top: 105px;
    left: 304px;
  }
}
@media screen and (max-width: 1500px) {
  .index2 .wrap .content .r .list p {
    font-size: 18px;
  }
  .index2 .wrap .content .r .list .time {
    font-size: 18px;
  }
  .index2 .wrap .content .r {
    width: 48%;
  }
  .index2 .wrap .content .r .list p {
    width: 60%;
  }
  .index2 .wrap .content .l {
    width: 48%;
  }
  .index2 .wrap .content .l .text {
    font-size: 20px;
    left: 3%;
  }
  .index2 .wrap .content .r .list:not(:last-child) {
    margin: 0 0 30px;
  }
  .index3 .wrap .content .r {
    width: 54%;
  }
  .index3 .wrap .content .l {
    width: 42%;
  }
  .index3 .wrap .content .l .list .pick {
    width: 78%;
  }
  .index3 .wrap .content .r .swiper {
    width: 75%;
  }
  .index3 .wrap .content .r .swiper .swiper-slide img {
    width: 100%;
  }
  .index5 .wrap .title p {
    font-size: 21px;
    line-height: 39px;
  }
  .bor_content {
    transform: scale(1.1);
  }
  .index4 .wrap .position3 {
    left: 288px;
  }
  .index4 .wrap .position2 {
    top: 431px;
    left: 280px;
  }
  .index4 .wrap .position1 {
    top: 325px;
    left: 53px;
  }
}

@media screen and (max-width: 1335px) {
  .bor_content {
    transform: scale(1);
  }
  .index4 .wrap .position3 {
    left: 287px;
    width: 60px;
  }
  .index4 .wrap .position1 {
    top: 312px;
    left: 73px;
    width: 125px;
  }
  .index4 .wrap .position2 {
    top: 402px;
    left: 271px;
    width: 85px;
  }
}

@media screen and (max-width: 1300px) {
  .index2 .wrap .content .r .list:not(:last-child) {
    margin: 0 0 15px;
  }
  .index2 .wrap .content .r .list p {
    font-size: 16px;
  }
  .index2 .wrap .content .l .text {
    font-size: 18px;
  }
  .common_title .more {
    font-size: 16px;
  }
  .index2 .wrap .content .r .list p {
    width: 65%;
    margin-right: 0;
  }
  .index2 .wrap .content .r .list .time {
    font-size: 14px;
  }
  .index2 .wrap .content .l .text {
    font-size: 15px;
  }
}

@media screen and (max-width: 1200px) {
  .bor_content .item .box .picture .text{
    opacity: 1!important;
  }
  .index1 {
    padding: 60px 0 0 0;
    .swiper{
      .swiper-slide{
        img{
          height: 70vh;
        }
        .text{
          .cn{
            font-size: 24px;
          }
          .en{
            font-size: 18px;
          }
        }
      }
    }
  }
  .index1 .position {
    bottom: 20px;
  }
  .common_title .l {
    font-size: 24px;
  }
  .common_title .more {
    font-size: 14px;
  }
  .index2 .wrap .content .r:after {
    display: none;
  }
  .index2 {
    padding: 30px 0;
  }
  .index2 .wrap .content {
    flex-direction: column;
  }
  .index2 .wrap .content .l {
    width: 100%;
  }
  .index2 .wrap .content .l .text {
    font-size: 13px;
  }
  .index2 .wrap .content .r {
    width: 100%;
    margin: 10px 0 0 0;
  }
  .index2 .wrap .content .r .list .circle {
    margin: 0 8px;
  }
  .index2 .wrap .content .r .list {
    justify-content: space-between;
  }
  .index2 .wrap .flex .item > div span {
    font-size: 20px;
  }
  .index2 .wrap .flex {
    flex-direction: column;
  }
  .index2 .wrap .flex .item {
    width: 100%;
    padding: 15px 0;
  }
  .index2 .wrap .flex {
    height: auto;
  }
  .index3 .wrap .content {
    flex-direction: column;
  }
  .index3 .wrap .content .l {
    width: 100%;
  }
  .index3 .wrap .content .l .list .pick {
    font-size: 16px;
  }
  .index3 .wrap .content .l .list .time span {
    font-size: 15px;
  }
  .index3 .wrap .content .l .list .time .color {
    font-size: 12px;
  }
  .index3 .wrap .content .r {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    padding: 40px 0;
  }
  .index3 .wrap .content .r .swiper .swiper-slide img {
    transform: scale(1) !important;
  }
  .index3 .wrap .content .r .swiper .swiper-slide {
    left: 0;
  }
  .index4 .wrap {
    margin: 36px auto 35px;
  }
  .index4 .wrap .title {
    font-size: 24px;
  }
  .index3 {
    padding: 0 0 30px;
  }
  .index5 {
    padding: 30px 0;
  }
  .index5 .wrap .title h1 {
    font-size: 24px;
  }
  .index5 .wrap .title h1:after {
    width: 100%;
  }
  .index5 .wrap .title p {
    font-size: 14px;
    line-height: 33px;
  }
  .index5 .wrap .content .swiper {
    width: 68%;
  }
  .index5 .wrap .content .swiper .swiper-slide .text {
    font-size: 14px;
    margin: 0 auto 15px;
  }
  .index5 .wrap .content .swiper .swiper-slide .img img {
    height: 280px;
    object-fit: contain;
  }
  .index5 .wrap .content .button img {
    width: 28px;
  }
  .index5 .wrap .title {
    margin: 0 0 30px;
  }
  .index4 .bor_content{
    display: none;
  }
  .index4 .sj_content{
    display: flex!important;
    justify-content: space-between;
    width: 51%;
    margin: auto;
  }
  .index4 .sj_content .flex{
    flex-direction: column;
  }
  .index4 .sj_content .flex:nth-child(2) {
    margin: 87px 0 0 0;
  }
  .bor_content .item:nth-child(2n-1) {
    transform: translateY(0);
  }
  .index4 .wrap .position1,.index4 .wrap .position2,.index4 .wrap .position3{
    display: none;
  }
}

@media screen and (max-width: 848px) {
  .index4 .sj_content {
    width: 68%;
    margin: 70px auto;
  }
}
@media screen and (max-width: 666px) {
  .index4 .sj_content {
    width: 83%;
  }
}
@media screen and (max-width: 600px) {
  .index4 .sj_content {
    width: 83%;
    transform: scale(0.8);
  }
}
@media screen and (max-width: 530px) {
  .index4 .sj_content {
    width: 83%;
    transform: scale(0.7);
    margin: 81px auto 0;
  }

  .index4 {
    height: 595px;
  }
}
@media screen and (max-width: 445px) {
  .index4 .sj_content {
    width: 83%;
    transform: scale(0.6);
  }
}